<template>
  <t-table
    :data="annotationStore.countByTag"
    :columns="columns"
    bordered
    size="small"
    row-key="tagId"
  >
    <template #tagId="{ row }">
      <t-tag
        variant="light"
        :style="{
          background: preferenceStore.tagColor(row.tagId)?.colorValue,
        }"
      >
        {{ row.content }}
      </t-tag>
    </template>
  </t-table>
</template>

<script setup lang="ts">
import { useAnnotationStore } from '@/stores/annotation'
import { usePreferenceStore } from '@/stores/preference'
import { PrimaryTableCol } from 'tdesign-vue-next'

interface Props {
  identifier?: string
}
const props = defineProps<Props>()

const annotationStore = useAnnotationStore()
const preferenceStore = usePreferenceStore()

const columns: PrimaryTableCol[] = [
  {
    colKey: 'title',
    title: '当前文本: ' + props.identifier,
    children: [
      {
        colKey: 'tagId',
        title: '标签',
      },
      {
        colKey: 'count',
        title: '数量',
      },
    ],
  },
]
</script>

<style scoped></style>
